@use "@/common/styles/colors"

.btn
  display: flex
  align-items: center
  justify-content: center
  gap: 0.5rem
  background-color: colors.$primary-opacity
  border: 1px solid colors.$gray
  color: colors.$white
  border-radius: 0.5rem
  padding: 0.8rem 1rem
  cursor: pointer
  transition: all 0.2s

  @media (max-width: 768px)
    padding: 0.7rem 0.9rem
    gap: 0.4rem

  @media (max-width: 480px)
    padding: 0.6rem 0.8rem
    gap: 0.3rem
    width: 100%

  svg
    width: 1.1rem
    height: 1.1rem

    @media (max-width: 480px)
      width: 1rem
      height: 1rem

  h3
    margin: 0
    font-size: 1rem
    font-weight: 500
    color: colors.$white

    @media (max-width: 768px)
      font-size: 0.9rem

    @media (max-width: 480px)
      font-size: 0.85rem

  &:hover
    filter: brightness(0.8)

  &:active
    transform: scale(0.97)

  &:disabled
    background-color: colors.$gray
    cursor: not-allowed

.type-secondary
  background-color: colors.$gray

.type-danger
  background-color: colors.$error-opacity